<template>
  <div class="swiperItem">
    <div class="box">
      <carousel-3d
        :count="lunboList.length"
        :autoplay="true"
        :autoplayTimeout="1500"
        :perspective="100"
        :animationSpeed="1000"
        :width="300"
        :height="100"
      >
        <slide v-for="(item, i) in lunboList" :index="i" :key="i" style="height: 100%">
          <template>
            <van-card
              :tag="item.discount"
              :price="item.price"
              :desc="item.desc"
              :title="item.title"
              :thumb="item.url"
              :origin-price="item.originprice"
            />
          </template>
        </slide>
      </carousel-3d>
    </div>
  </div>
</template>
<script>
import * as http from "@/api/home.js";

import { Carousel3d, Slide } from "vue-carousel-3d";
export default {
  components: {
    Carousel3d,
    Slide,
  },
  data() {
    return {
      lunboList: "",
    };
  },
  methods: {
    async getLunbo1() {
      var res = await http.getLunbo1();
      this.lunboList = res.data.swiperImg1;
      console.log(this.lunboList);
    },
  },
  created() {
    this.getLunbo1();
  },
  mounted() {
    console.log(this.lunboList, 123);
  },
};
</script>
<style lang="scss">
</style>
